<template>
	<view class="">
		<view class="head p-r pt-100">
			<view class="bg"></view>
			<view class="avatar fd-r jc-c">
				<image
					class="w-160 h-160 rd-100 bd"
					:src="user.avatar"
					mode=""
				></image>
			</view>

			<view class="z-card pt-110 pb-24 fd-c relative z-4">
				<view class="fd-r jc-c">
					<text class="mr-16 fs-32 fw-b">{{ user.name }}</text>
				</view>

				<view class="pt-16 fd-r jc-c">
					<button
						class="btn-red h-52 lh-52rpx mx-12 fs-24"
						@click="gotoSet"
					>
						用户设置
					</button>
					<button
						class="btn-red h-52 lh-52rpx mx-12 fs-24"
						@click="HGotoAddress"
					>
						收货地址
					</button>
				</view>

				<!-- <view class="py-24 fd-r jc-sa">
					<view class="fd-c ai-c">
						<tm-icon
							:font-size="48"
							name="tmicon-collection"
							color="#c8161d"
						></tm-icon>
						<text class="fs-28 c-grey">收藏</text>
					</view>
					<view class="fd-c ai-c">
						<tm-icon
							:font-size="48"
							name="tmicon-weixin"
							color="#c8161d"
						></tm-icon>
						<text class="fs-28 c-grey">微信公众号</text>
					</view>
					<view class="fd-c ai-c">
						<tm-icon
							:font-size="48"
							name="tmicon-paper-plane"
							color="#c8161d"
						></tm-icon>
						<text class="fs-28 c-grey">麦子</text>
					</view>
					<view class="fd-c ai-c">
						<tm-icon
							:font-size="48"
							name="tmicon-hongbao"
							color="#c8161d"
						></tm-icon>
						<text class="fs-28 c-grey">红包卡券</text>
					</view>
				</view> -->
			</view>
		</view>

		<view class="z-card px-24">
			<view class="py-16 fd-r" @click="HGotoOrder('全部')">
				<text class="flex1 fw-b">我的订单</text>
				<text class="fs-20 c-grey">全部订单</text>
				<tm-icon
					name="tmicon-angle-right"
					:fontSize="20"
					color="grey"
				></tm-icon>
			</view>

			<view class="pb-24 fd-r jc-sa">
				<block v-for="item in orderMenu" :key="item.text">
					<tm-badge color="primary" :count="item.badge">
						<view class="fd-c ai-c" @click="HGoToPage(item)">
							<tm-icon
								:name="item.icon"
								:fontSize="item.size"
								:color="primary"
							></tm-icon>
							<text class="mt-12">{{ item.text }}</text>
						</view>
					</tm-badge>
				</block>
			</view>
		</view>

		<!-- <view class="z-card bgc-white px-24 py-12 fd-r fw-w">
			<block v-for="item in menuList" :key="item.text">
				<view
					class="w-full-20 py-12 fd-c ai-c"
					@click="goToPage(item.path)"
				>
					<tm-icon
						:font-size="48"
						:name="item.icon"
						color="#808080"
					></tm-icon>
					<text class="mt-12 fs-24 text-808080">{{ item.text }}</text>
				</view>
			</block>
		</view> -->
	</view>
</template>
<script setup>
import { ref } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import tmIcon from '@/tmui/components/tm-icon/tm-icon.vue'

import { storeToRefs } from 'pinia';
import { useUserStore } from '@/store/user.js';
const userStore = useUserStore();
const { user } = storeToRefs(userStore);

onShow(() => {
	userStore.HGetUserInfo();
});

const primary = ref(uni.$tm.config.theme.primary)
const orderMenu = ref([
	{
		icon: 'tmicon-yinhangqia',
		text: '待支付',
		badge: 1,
		size: 40,
		path: '/pages/zone1/order/list/index?status=待支付'
	},
	{
		icon: 'tmicon-box-fill',
		text: '待收货',
		badge: 2,
		size: 48,
		path: '/pages/zone1/order/list/index?status=待收货'
	},
	{
		icon: 'tmicon-commentlines-fill',
		text: '待评价',
		badge: 3,
		size: 48,
		path: ''
	},
	{
		icon: 'tmicon-headset-fill',
		text: '退款/售后',
		badge: 0,
		size: 48,
		path: ''
	}
]);

const menuList = ref([
	{
		icon: 'tmicon-renminbi3',
		text: '退款/售后',
		path: ''
	},
	{
		icon: 'tmicon-ios-filing',
		text: '发票报销',
		path: ''
	},
	{
		icon: 'tmicon-userplus-fill',
		text: '团长招募',
		path: ''
	},
	{
		icon: 'tmicon-lock-fill',
		text: '客服服务',
		path: ''
	},
	{
		icon: 'tmicon-lock-fill',
		text: '隐私管理',
		path: ''
	}
]);

import toolLogin from '@/utils/login.js';
const gotoSet = () => {
	toolLogin.isNeedToLogin((res) => {
		if (res) {
			uni.navigateTo({ url: '/pages/zone1/user/index' });
		}
	});
};

const HGotoAddress = () => {
	uni.navigateTo({
		url: '/pages/zone1/address/list/index'
	});
};

function HGotoOrder(status) {
	uni.navigateTo({
		url: `/pages/zone1/order/list/index?status=${status}`
	});
}

function HGoToPage({ path }) {
	uni.navigateTo({ url: path });
}
</script>

<style lang="scss" scoped>
.head {
	// 设置背景图片的尺寸。
}

.bg {
	position: absolute;
	top: 0;
	width: 750rpx;
	height: 300rpx;
	border-radius: 0 0 30% 30%;
	background-color: $c-red;
	z-index: 1;
}

.avatar {
	position: absolute;
	top: 40rpx;
	left: 0;
	right: 0;
	z-index: 10;

	.bd {
		border: 6rpx solid $c-red; // 设置头像边框样式，根据实际需求调整。
	}
}
</style>
